import React, {Component} from 'react';
import './index.scss'
import {Layout, Menu, Dropdown} from 'antd';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  BarsOutlined,
  MessageOutlined,
  DownOutlined,
  UserOutlined,
  LogoutOutlined
} from '@ant-design/icons';
import logoUrl from '../../assets/images/logo.png';
import {connect} from "react-redux";
import actionCreator from "../../store/actionCreator";
import {bindActionCreators} from "redux";
const {Header} = Layout;

const DopMenu = (
  <Menu>
    <Menu.Item key="0" icon={<UserOutlined/>}>
      <a href={'false'}>个人中心</a>
    </Menu.Item>
    <Menu.Item key="1" icon={<LogoutOutlined/>}>
      <a href={'false'}>退出登录</a>
    </Menu.Item>
  </Menu>
);


class Headers extends Component {
  boardControl(){
    let { MenuShrink,SHRINK_BOARD,SET_ACTIVE_CATEGORY } = this.props
    SHRINK_BOARD(!MenuShrink)
    if(!MenuShrink){
      SET_ACTIVE_CATEGORY('')
    }
  }
  render() {
    return (
      <Header className={'header_wrap'}>
        <div className="header_center">
          {
            this.props.MenuShrink?
              <MenuUnfoldOutlined className={'menu_fld_bth'} onClick={this.boardControl.bind(this)}/>
              :<MenuFoldOutlined className={'menu_fld_bth'} onClick={this.boardControl.bind(this)}/>
          }
          
          
          {/*<MenuUnfoldOutlined />*/}
          <div className="header_right">
            <div className="header_tasks">
              <BarsOutlined className={'header_tasks_icon'}/>
              <span className={'header_task_name'}>任务</span>
            </div>
            <div className="header_messages">
              <MessageOutlined className={'header_message_icon'}/>
              <span className={'header_message_name'}>消息</span>
            </div>
            <div className="header_user_info">
              <img src={logoUrl} alt="" className="header_avatar" draggable={false}/>
              <Dropdown
                overlay={DopMenu}
                trigger={['click']}
                getPopupContainer={(dropNode) => {
                  return dropNode
                }}>
                <a className="ant-dropdown-link" onClick={e => e.preventDefault()} href={'false'}>
                  Hi,Kevin <DownOutlined/>
                </a>
              </Dropdown>
            </div>
          </div>
        </div>
      </Header>
    );
  }
}

export default connect(state=>state,(dispatch)=>{
  return bindActionCreators(actionCreator,dispatch)
})(Headers);
